<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>模板语法</title>
		<script src="../static/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<!--插值：
			文本
			数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
			Mustache 标签将会被替代为对应数据对象上 msg 属性的值。
			无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。-->
			<span>Message:{{msg}}</span>

			<!--通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，
			插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：-->
			<br />
			<span v-once>这个将不会改变: {{ msg }}</span>

			<!--原始 HTML双大括号会将数据解释为普通文本，
			而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：-->

			<p>Using mustaches: {{ rawHtml }}</p>
			<p>Using v-html directive: <span v-html="rawHtml"></span></p>
			<!--这个 span 的内容将会被替换成为属性值 rawHtml，直接作为
			 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 
			 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。
			 反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。-->

			<!--Mustache 语法不能作用在 HTML 特性上，
			遇到这种情况应该使用 v-bind 指令：
			下面的代码，是绑定了了id值，然后通过id对标签设置innerText
			-->
			<div v-bind:id="dynamicId"></div>

			<!--在布尔特性的情况下，它们的存在即暗示为 true，
			v-bind 工作起来略有不同，在这个例子中：
			如果 isButtonDisabled 的值是 null、undefined 或 false，
			则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。-->
			<button v-bind:disabled="isButtonDisabled">Button</button>
			<!--使用 JavaScript 表达式在我们的模板中，
			我们一直都只绑定简单的属性键值。但实际上，
			对于所有的数据绑定，Vue.js 都提供了完全的 
			JavaScript 表达式支持。
			这些表达式会在所属 Vue 实例的数据作用域下作为
			 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式-->
			<div>
				first line:{{ number + 1 }}
				<br /> second line:{{ ok ? 'YES' : 'NO' }}
				<br /> third line: {{ message.split('').reverse().join('') }}
				<br />
				<div v-bind:id="'list-' + id"></div>
			</div>

			<!--模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，
			如 Math 和 Date 。你不应该在模板表达式中试图访
			问用户定义的全局变量。-->
			<div>
				时间：{{Date().toLocaleString()}}
				最大值函数：{{Math.max(10,20)}}
			</div>
			
			<!--指令
			指令 (Directives) 是带有 v- 前缀的特殊特性。
			指令特性的值预期是单个 JavaScript 表达式 (v-for
			 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时
			 ，将其产生的连带影响，响应式地作用于 DOM。
			 回顾我们在介绍中看到的例子：-->
			 <p v-if="seen">现在你看到我了</p>
			
			<!--参数
			一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
			例如，v-bind 指令可以用于响应式地更新 HTML 特性：
			另一个例子是 v-on 指令，它用于监听 DOM 事件：
			-->
			<a v-bind:href="url">你可以去百度</a>
			<br />
			<a :href="url">你可以去百度</a><!--这个v-bind是简写-->
			<br />
			<a v-on:click="doSomething" style="color:red">点击可以调用doSomething函数</a>
			<br />
			<a @click="doSomething" style="color:red">点击可以调用doSomething函数</a><!--这个v-on是简写-->
			
			
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "插入的数据",
					rawHtml: "",
					isButtonDisabled: true,
					number:99,
					ok:true,
					message:"请把我反过来",
					id:1000,//我们对这个绑定的lsit-1000 的id进行赋值，看看效果
					seen:true,
					url:"https://www.baidu.com",
					
				},
				computed: {
					dynamicId() {
						return "bindId"
					}
				},
				methods:{
					doSomething(){
						alert("你点击了v-on绑定的click事件")
					}
				}
			})

			vm.msg = "更新msg插值"
			vm.rawHtml = "<p style='color:red'>这句话是红色的</p>"
			document.getElementById(vm.dynamicId).innerText = "通过绑定id赋值标签"
			document.getElementById("list-1000").innerText = "我们拿了list-1000的id进行了赋值"
			
			
		</script>

	</body>

</html>